import React, { Component } from "react";
//对类型进行限制
import PropTypes from "prop-types";
import "./index.css";
import { nanoid } from "nanoid";
console.log(nanoid());
export default class Header extends Component {
  //对接受的props类型,必要性进行限制
  static propTypes = {
    addTodo: PropTypes.func.isRequired,
  };

  handlekeyUp = (e) => {
    //鼠标按下时进行输入
    const { keyCode, target } = e;
    if (keyCode !== 13) return;
    //添加的todo名字不能为空
    if (target.value.trim() === "") {
      alert("添加的todo名称不能为空");
      return;
    }
    //准备好一个todo对象
    const todoObj = { id: nanoid(), name: target.value, done: false };
    this.props.addTodo(todoObj);
    //清空输入
    target.value = "";
  };
  render() {
    return (
      <div className="todo-header">
        <input
          onKeyUp={this.handlekeyUp}
          type="text"
          placeholder="请输入你的任务名称，按回车键确认"
        />
      </div>
    );
  }
}
